<template>
	<el-dialog :title="state.ruleForm.id ? '编辑' : '添加'" v-model="state.isShowDialog" width="600px" draggable :before-close="closeDialog">
		<!-- 步骤条 -->
		<el-steps :active="state.activeStep" finish-status="success" align-center class="mb23">
			<el-step title="创建任务" />
			<el-step title="选择用户" />
		</el-steps>
		<!-- 表单 -->
		<div v-show="state.activeStep==0" >
			<taskForm ref="dialogFormRef"/>
		</div>
		<!-- 表格 -->
		<div v-show="state.activeStep==1" >
			
		</div>
		<!-- 自定义footer -->
		<template #footer>
			<span class="dialog-footer" v-show="1">
				<el-button v-if="state.activeStep==1" type="success" @click="onPrevious" size="default">上一步</el-button>
				<el-button v-if="state.activeStep==0" type="success" @click="onNext" size="default">下一步</el-button>
				<el-button v-if="state.activeStep==1" @click="onCancel" size="default">取 消</el-button>
				<el-button v-if="state.activeStep==1" type="primary" @click="onSubmit" size="default">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="systemTaskDialog">
import taskForm from '../component/taskForm.vue';
// 后台接口
import { systemApi } from '/@/api/system/index';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const dialogFormRef = ref();
const state = reactive({
	isShowDialog: false,
  activeStep: 0, // 当前步骤
	ruleForm: {
		id: '',
		companyname: '', // 代理商名称
		cnum: 0, // 购买PC软件数量
		companyaddress: '', // 代理商地址
		// createBy: '' //操作用户id
	},
  companyData: <any>[], // 一级代理商数据
  laborunionData: <any>[], // 工会数据
});
// 打开添加弹窗
const openDialog = (row: RowTaskType) => {
	state.isShowDialog = true;
	// nextTick(() => {
	// 	dialogFormRef.value.resetFields();  // 清空表单并移除校验结果，此项需加表单验证才能使用
	// 	if (row) {
	// 		state.ruleForm = JSON.parse(JSON.stringify(row));
	// 	}else{
	// 		state.ruleForm = {
	// 			id: '',
	// 			companyname: '', // 代理商名称
	// 			cnum: 0, // 购买PC软件数量
	// 			companyaddress: '', // 代理商地址
	// 			// createBy: '' //操作用户id
	// 		}
	// 	}
	// })
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
	state.activeStep = 0;
	dialogFormRef.value.resetFields();  // 清空表单并移除校验结果
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 上一步
const onPrevious = () => {
	if(state.activeStep>0){
		state.activeStep--;
	}
}
// 下一步
const onNext = () => {
	if(state.activeStep<1){
		dialogFormRef.value.formRef.validate((valid: any) => {
			if(valid){
				state.activeStep++;
			}
		})
  }
}
// 确定
const onSubmit = async () => {
	// 表单验证
	await dialogFormRef.value?.validate(async (valid: any) => {
		if (valid) {
			// 保存到数据库
			// state.ruleForm.createBy = store.state.userInfos.userInfos.id; //操作用户id
			let res: any = await systemApi().addCompany(state.ruleForm);
			if (res.success) {
				emit('refresh')
				ElMessage.success('操作成功');
			} else {
				ElMessage.error('操作失败');
			}
			closeDialog();
		}
	});
};




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
:deep(.el-input-number .el-input__inner){
	text-align: left;
}
</style>
